<template>
  <div class="myaccount">
    <el-tabs v-model="activeTab" type="card" @tab-click="tabChange">
      <el-tab-pane label="待结算" name="1"></el-tab-pane>
      <el-tab-pane label="已结算" name="2"></el-tab-pane>
    </el-tabs>

    <div style="margin:20px 0;">
      <span>订单号</span>
      <el-input v-model="keyOrderNum" type="text" style="width:300px" />
      <el-date-picker
        v-model="keyTime"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width:400px"
      />
      <el-button type="primary">搜索</el-button>
    </div>

    <el-table
      :data="billTableData"
      :header-cell-style="{background:'#fafbfc',color:'#606266'}"
      border
      style="width: 100%">
      <el-table-column prop="time" label="时间" align="center" />
      <el-table-column prop="type" label="类型" align="center" />
      <el-table-column prop="name" label="商品名称|商品类型" align="center" />
      <el-table-column prop="payWay" label="支付方式|订单号" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.payWay }}</div>
          <div>{{ scope.row.orderNum }}</div>
        </template>
      </el-table-column>
      <el-table-column label="入账/支出（元）" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.income">+ {{ scope.row.income }}</span>
          <span v-if="scope.row.expend">- {{ scope.row.expend }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '1',
      keyOrderNum: '',
      keyTime: '',
      billTableData: [
        {
          time: '2019-03-06',
          type: '面授',
          name: '高中语文',
          payWay: '微信支付',
          orderNum: '023131131',
          income: '',
          expend: '95'
        }
      ]
    }
  },
  methods: {
    tabChange(val, e) {
      // console.log(val, e)
      if (val.label === '待结算') {
        // 发请求
      } else if (val.label === '已结算') {
        // 发请求
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.myaccount {
}
</style>

